<template>
  <view class="family-create-container">
    <!-- 顶部导航 -->
    <view class="header-section">
      <text class="page-title">{{ currentMode === 'create' ? '创建家庭' : '加入家庭' }}</text>
      <text class="page-subtitle">{{ currentMode === 'create' ? '创建专属于你们的家庭空间' : '输入邀请码加入家庭' }}</text>
    </view>

    <!-- 模式切换 -->
    <view class="mode-switch">
      <view 
        class="mode-item"
        :class="{ active: currentMode === 'create' }"
        @click="switchMode('create')"
      >
        <text class="mode-text">创建家庭</text>
      </view>
      <view 
        class="mode-item"
        :class="{ active: currentMode === 'join' }"
        @click="switchMode('join')"
      >
        <text class="mode-text">加入家庭</text>
      </view>
    </view>

    <!-- 创建家庭表单 -->
    <view class="form-section" v-if="currentMode === 'create'">
      <view class="form-item">
        <text class="label">家庭名称 *</text>
        <input 
          class="input" 
          v-model="createForm.name" 
          placeholder="给你的家庭起个温馨的名字"
          maxlength="20"
        />
      </view>
      
      <view class="form-item">
        <text class="label">家庭描述</text>
        <textarea 
          class="textarea" 
          v-model="createForm.description" 
          placeholder="介绍一下你的家庭（可选）"
          maxlength="100"
        />
      </view>
      
      <button 
        class="submit-btn create-btn"
        @click="handleCreateFamily"
        :disabled="!createForm.name || createLoading"
      >
        {{ createLoading ? '创建中...' : '创建家庭' }}
      </button>
    </view>

    <!-- 加入家庭表单 -->
    <view class="form-section" v-if="currentMode === 'join'">
      <view class="form-item">
        <text class="label">邀请码 *</text>
        <input 
          class="input" 
          v-model="joinForm.inviteCode" 
          placeholder="请输入家庭邀请码"
          maxlength="20"
        />
      </view>
      
      <button 
        class="submit-btn join-btn"
        @click="handleJoinFamily"
        :disabled="!joinForm.inviteCode || joinLoading"
      >
        {{ joinLoading ? '加入中...' : '加入家庭' }}
      </button>
    </view>

    <!-- 底部提示 -->
    <view class="footer-tips">
      <text class="tip-text">{{ currentMode === 'create' ? '创建后可邀请家人加入' : '需要家庭创建者提供邀请码' }}</text>
    </view>
  </view>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'FamilyCreateSimple',
  data() {
    return {
      currentMode: 'create', // create 或 join
      createLoading: false,
      joinLoading: false,
      
      createForm: {
        name: '',
        description: ''
      },
      
      joinForm: {
        inviteCode: ''
      }
    }
  },
  
  methods: {
    ...mapActions('family', ['createFamily', 'joinFamily']),
    
    // 切换模式
    switchMode(mode) {
      this.currentMode = mode
    },
    
    // 创建家庭
    async handleCreateFamily() {
      if (!this.createForm.name.trim()) {
        uni.showToast({
          title: '请输入家庭名称',
          icon: 'none'
        })
        return
      }
      
      this.createLoading = true
      
      try {
        const family = await this.createFamily({
          name: this.createForm.name.trim(),
          description: this.createForm.description.trim() || null
        })
        
        uni.showToast({
          title: '家庭创建成功！',
          icon: 'success'
        })
        
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }, 1500)
        
      } catch (error) {
        console.error('创建家庭失败:', error)
        
        // 显示具体的错误信息
        let errorMessage = '创建家庭失败'
        if (error.message) {
          errorMessage = error.message
        } else if (typeof error === 'string') {
          errorMessage = error
        }
        
        uni.showToast({
          title: errorMessage,
          icon: 'none',
          duration: 2000
        })
      } finally {
        this.createLoading = false
      }
    },
    
    // 加入家庭
    async handleJoinFamily() {
      if (!this.joinForm.inviteCode.trim()) {
        uni.showToast({
          title: '请输入邀请码',
          icon: 'none'
        })
        return
      }
      
      this.joinLoading = true
      
      try {
        const family = await this.joinFamily(this.joinForm.inviteCode.trim())
        
        uni.showToast({
          title: '加入家庭成功！',
          icon: 'success'
        })
        
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }, 1500)
        
      } catch (error) {
        console.error('加入家庭失败:', error)
        
        // 显示具体的错误信息
        let errorMessage = '加入家庭失败'
        if (error.message) {
          errorMessage = error.message
        } else if (typeof error === 'string') {
          errorMessage = error
        }
        
        uni.showToast({
          title: errorMessage,
          icon: 'none'
        })
      } finally {
        this.joinLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.family-create-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 40rpx 30rpx;
}

.header-section {
  text-align: center;
  margin-bottom: 60rpx;
  
  .page-title {
    display: block;
    font-size: 48rpx;
    font-weight: 700;
    color: #333;
    margin-bottom: 16rpx;
  }
  
  .page-subtitle {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
  }
}

.mode-switch {
  display: flex;
  background: white;
  border-radius: 20rpx;
  padding: 8rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .mode-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24rpx 20rpx;
    border-radius: 16rpx;
    transition: all 0.3s ease;
    
    &.active {
      background: #f0f8ff;
      
      .mode-text {
        color: #007AFF;
        font-weight: 600;
      }
    }
    
    .mode-text {
      font-size: 28rpx;
      color: #666;
    }
  }
}

.form-section {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.form-item {
  margin-bottom: 40rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .label {
    display: block;
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 16rpx;
  }
  
  .input, .textarea {
    width: 100%;
    padding: 20rpx;
    border: 1px solid #e9ecef;
    border-radius: 12rpx;
    font-size: 28rpx;
    background: #f8f9fa;
    
    &:focus {
      border-color: #007AFF;
      background: white;
    }
  }
  
  .input {
    height: 88rpx;
  }
  
  .textarea {
    min-height: 120rpx;
    resize: vertical;
  }
}

.submit-btn {
  width: 100%;
  height: 96rpx;
  border-radius: 48rpx;
  font-size: 32rpx;
  font-weight: 600;
  border: none;
  margin-top: 40rpx;
  
  &.create-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
  }
  
  &.join-btn {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
  }
  
  &[disabled] {
    opacity: 0.5;
  }
}

.footer-tips {
  margin-top: 40rpx;
  text-align: center;
  
  .tip-text {
    font-size: 24rpx;
    color: #999;
  }
}
</style> 